<template>
  <div>
    <div class="search">
      <el-form>
        <el-form-item label="网站尾部文字修改"></el-form-item>
      </el-form>
    </div>
    <div class="middle">
      <div>
        <el-form ref="form" :model="form" label-width="100px" v-loading="loading">
          <el-form-item label="第一行文字">
            <el-input v-model="form.data_one"></el-input>
          </el-form-item>
          <el-form-item label="第二行文字">
            <el-input v-model="form.data_two"></el-input>
          </el-form-item>
          <el-form-item label="第三行文字">
            <el-input v-model="form.data_three"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="up_tailData">立即修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { up_tailData, get_tailData } from "@/api/system/api";

export default {
  data() {
    return {
      loading: false,
      form: {
        data_one: "",
        data_two: "",
        data_three: ""
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      get_tailData().then(res => {
        let data = res.data;
        this.form = data.dataList[0];
        this.loading = false;
      });
    },
    up_tailData() {
      up_tailData(this.form).then(res => {
        if (res.data == "ok") {
          this.$message.success("修改成功！！！");
        }
      });
    }
  }
};
</script>

<style scoped>
.middle {
  background: #fff;
  margin: 0 15px;
}
.middle > div {
  padding: 20px 20px 10px 20px;
}
.search {
  margin: 10px 15px 0 15px;
}
.paging {
  display: flex;
  justify-content: end;
}
.pagination-container {
  margin-left: auto;
  margin-bottom: 20px;
}
</style>